<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
    <div id="app3">
        <input type="text" placeholder="请输入要查询的用户id" v-model="id"> <br>
        <button @click="findById">根据id查询用户</button>
        <br>
        {{user.name}}--{{user.pwd}}
    </div>
</body>

<script>
    new Vue({
        el:"#app3",
        data:{
            id:-1,
            user:{
                name:"",
                pwd:""
            }
        },
        methods:{
            findById(){
                //发送异步请求，根据当前的id获取用户信息
                //get方法的参数就是访问的目标url，而且get请求的参数只能通过?拼接在url后面
                let that = this;
                axios.get("/user/"+this.id)
                    .then(function (data){
                        let user = data.data;
                        that.user = user;
                    });
            }
        }
    });
</script>
</html>